<template>
	<view>
		<!-- 顶部导航栏 -->
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="content">我的订单</block>
		</cu-custom>

		<!-- 消息提示 -->
		<message ref="message"></message>


		<scroll-view scroll-y refresher-enabled :refresher-triggered="isRefresh"
			style="height: calc(100vh - 60px);"
			@scrolltolower="handleScrollBottom"
			@refresherrefresh="handleRefresh">
			
			<order-item :order="item" v-for="(item, index) in courseList" :key="index"></order-item>
			<!-- 加载更多 -->
			<view v-show="isShowLoadMore" class="cu-load text-lg" :class="isLoad?'loading':'over'"></view>
		</scroll-view>


		<!-- 加载弹窗 -->
		<view class="cu-load load-modal" v-if="loadModal">
			<image src="@/static/logo.jpg" mode="aspectFit"></image>
			<view class="gray-text">加载中...</view>
		</view>

	</view>
</template>

<script>
	import {
		getOrderPageByStudent
	} from '@/api/order.js'
	
	import OrderItem from "@/components/order-item/order-item.vue"
	import { mapGetters } from "vuex"
	
	export default {
		components:{
			OrderItem
		},
		data() {
			return {
				courseList: [],
				// 总数
				total: 0,
				// 加载更多弹窗
				loadModal: true,
				// 查询对象
				listQuery: {
					current: 1,
					size: 10
				},
				// 下拉刷新控制
				isRefresh: false,
				// 显示课程加载更多
				isShowLoadMore: false,
				// 课程加载更多
				isLoad: true,
			}
		},
		created() {
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			this.getPageList()
		},
		onShow() {
			this.loadModal = true
			this.courseList = []
			this.getPageList()
		},
		methods: {
			// 获取订单列表
			getPageList() {
				getOrderPageByStudent(this.listQuery).then(res => {
					if (res.data.records.length > 0) {
						this.courseList = this.courseList.concat(res.data.records)
						// 关闭底部加载更多
						this.isShowLoadMore = false
						// 关闭下拉加载更多
						this.isRefresh = false
					} else {
						this.isLoad = false
						// 关闭下拉加载更多
						this.isRefresh = false
					}
					this.loadModal = false
				}).catch(err => {
					this.isLoad = false
					// 关闭下拉加载更多
					this.isRefresh = false
					this.loadModal = false
				})
			},
			// 滑到底部处理函数
			handleScrollBottom() {
				if (!this.isShowLoadMore) {
					this.isShowLoadMore = true
					this.isLoad = true
					this.listQuery.current++
					this.getPageList()
				}
			},
			// 自定义下拉刷新事件
			handleRefresh() {
				// 手动开启下拉刷新状态
				this.isRefresh = true
				// 重置课程列表
				this.courseList = []
				this.listQuery.current = 1
				this.getPageList()
			}
		}
	}
</script>

<style>

</style>
